<div class="contactList-container" data-pt-select-multiple-elements="contact">

    <request-timeout></request-timeout>
    <contact-no-result ng-if="!contacts.length"></contact-no-result>

    <div class="pm_table" ng-if="contacts.length">
        <table class="contactList-table fixedLayout">
            <thead class="contactList-thead">
                <tr>
                    <th scope="col" class="checkbox"></th>
                    <th scope="col"
                        data-sort="Name"
                        data-action="toggleSort">
                        <span
                            translate-context="Title"
                            translate-comment="table heading"
                            translate>Name</span>
                        <contact-arrows-sort data-sort="Name"></contact-arrows-sort>
                    </th>
                    <th scope="col"
                        data-sort="emails"
                        data-action="toggleSort">
                        <span
                            translate-context="Title"
                            translate-comment="table heading"
                            translate>Email</span>
                        <contact-arrows-sort data-sort="emails"></contact-arrows-sort>
                    </th>
                </tr>
            </thead>
            <tbody
                class="contactList-tbody"
                data-vs-repeat="{scrollParent: '.contactList-container'}">
                <tr
                    class="contactList-item"
                    data-contact-id="{{ ::contact.ID }}"
                    ng-class="{ 'contactList-item-activeCursorContact': isSelected(contact), 'contactList-item-activeContact': isActive(contact) }"
                    ng-repeat="contact in contacts track by contact.ID">
                    <td class="text-center contactList-checkbox">
                        <custom-checkbox
                            data-custom-contact-id="{{ ::contact.ID }}"
                            data-custom-ng-model="contact.selected"></custom-checkbox>
                    </td>
                    <td
                        data-contact-id="{{ ::contact.ID }}"
                        class="contactList-item-name"
                        data-action="showContact">
                        <span>{{ contact.Name }}</span>
                    </td>
                    <td
                        data-contact-id="{{ ::contact.ID }}"
                        class="text-muted contactList-item-email-wrapper" data-action="showContact">
                        <span class="contactList-item-email">
                            <ul class="inlineList">
                                <li>{{ contact.emails }}</li>
                            </ul>
                            <contact-groups-overview
                                data-contact="contact"
                                class="contactList-item-group"></contact-groups-overview>
                        </span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
